<template>
    <div class="scene-btn">
			<div>
        <div :class="(currentNav==item.value)?'item active':'item'" v-for="(item,index) in btnList" :key="index" @click="handleClick(item)">
					<div>
						<img :src="item.url">
						<p>{{item.value}}</p>
					</div>
				</div>
			</div>
			<div class="back" @click="back">返回</div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import mapService from '@src/utils/mapService'

export default {
	name: 'SceneBtn',
	computed: {
			...mapGetters(['sceneBtnVisible']),
    },
    components:{
    },
	data() {
		return {
			currentNav:'',
			visible: false,
			btnList:[
				{
					value:'综合查询',
					url:require('@src/assets/img/scene/zhcx.png'),
					id:'0'
				},
				{
					value:'网格员查询',
					url:require('@src/assets/img/scene/wgycx.png'),
					id:'1'
				},
				{
					value:'融合通讯',
					url:require('@src/assets/img/scene/rhsh.png'),
					id:'2'
				},
				{
					value:'指挥调度',
					url:require('@src/assets/img/scene/zhdd.png'),
					id:'3'
				},
				{
					value:'现场行动',
					url:require('@src/assets/img/scene/xcxd.png'),
					id:'4'
				},
				{
					value:'事件总结',
					url:require('@src/assets/img/scene/sgzj.png'),
					id:'5'
				},
			]
		}
	},
	mounted() {
			
	},
	methods: {
		handleClick(item){
			this.clearAll();
      switch (item.value){
        case '综合查询':
					if(this.currentNav == item.value){
						this.currentNav=''
						this.toCloseEvent({
							id:'2020070801'
						});
					}else{
						this.currentNav = item.value;
						this.toOpenEvent({
							path:"plant\\SFScript\\综合查询.as3",
							id:'2020070801'
						});
					}
          break;
        case '网格员查询':
					if(this.currentNav == item.value){
						this.currentNav=''
						this.toCloseEvent({
							id:'66'
						});
					}else{
						this.currentNav = item.value;
						this.toOpenEvent({
							path:"plant\\SFScript\\网格员查询.as3",
							id:'66'
						});
					}
          break;
        case '融合通讯':
					if(this.currentNav == item.value){
						this.currentNav=''
						this.$store.commit('home/SET_SCENE_IFRAME_VISIBLE',false);
					}else{
						this.currentNav = item.value;
        		this.$store.commit('home/SET_SCENE_IFRAME_VISIBLE',true);
					}
          break;
        case '指挥调度':
					if(this.currentNav == item.value){
						this.currentNav=''
						this.toCloseEvent({
							id:'1871409'
						});
					}else{
						this.currentNav = item.value;
						this.toOpenEvent({
							path:"plant\\SFScript\\指挥调度.as3",
							id:'1871409'
						});
					}
          break;
        case '现场行动':
					if(this.currentNav == item.value){
						this.currentNav=''
						this.toCloseEvent({
							id:'1042'
						});
					}else{
						this.currentNav = item.value;
						this.toOpenEvent({
							path:"plant\\SFScript\\现场行动.as3",
							id:'1042'
						});
					}
          break;
        case '事件总结':
					if(this.currentNav == item.value){
						this.currentNav=''
						this.$store.commit('home/SET_SCENE_SUMMARY_VISIBLE',false);
					}else{
						this.currentNav = item.value;
        		this.$store.commit('home/SET_SCENE_SUMMARY_VISIBLE',true);
					}
          break;
        default :
					break;
			}
		},
		//事件弹出
		toOpenEvent(obj){
			const msg = {
        "releative_path": obj.path || "plant\\SFScript\\事件弹出.as3",
				"service_id": "smart_city_effect.script.play_script",
				"stop_mode": 1,
				"script_id":  obj.id || "100300"
      }
      console.log(JSON.stringify(msg));
      mapService.sendService(msg);
		},
		toCloseEvent(obj){
			const msg = {
				"service_id": "smart_city_effect.script.stop_script",
 				"script_id":  obj.id || "100300"
      }
      console.log(JSON.stringify(msg));
      mapService.sendService(msg);
		},
		back(){
			this.$store.commit('home/SET_SCENE_BTN_VISIBLE',false);
			this.$emit('sceneBack');
			this.clearAll();
		},
		clearAll(){
			this.$store.commit('home/SET_SCENE_IFRAME_VISIBLE',false);
			this.$store.commit('home/SET_SCENE_SUMMARY_VISIBLE',false);
			this.toCloseEvent({
				id:'100300'
			});
			this.toCloseEvent({
				id:'1871409'
			});
			this.toCloseEvent({
				id:'1042'
			});
			this.toCloseEvent({
				id:'2020070801'
			});
			this.toCloseEvent({
				id:'66'
			});
		},
	},
	beforeDestroy() {
		this.clearAll();
	},
}
</script>

<style lang="less">
.scene-btn {
    position: absolute;
    right: 650px;
    bottom: 52px;
    z-index: 99;
    display: flex;
    flex-flow: row;
		user-select: none;
		z-index: 99999;
    // width: 700px;
    // height: 100px;
		// background:rgba(0,0,0,.6);
		&>div{
			display: flex;
			flex-flow: row;
			& .item{
				width: 100px;
				height: 100px;
				background: url("../../../assets/img/scene/bg.png");
				background-size: 100px 100px;
				overflow: hidden;
				margin-right: 25px;
				cursor: pointer;
				&.active{
					background: url("../../../assets/img/scene/bg-active.png");
					background-size: 100px 100px;
					transition: all .5s;
				}
				&:nth-last-of-type(1){
					margin-right: 0;
				}
				&:hover{
					background: url("../../../assets/img/scene/bg-active.png");
					background-size: 100px 100px;
					transition: all .5s;
				}
				&>div{
					text-align: center;
					padding-top: 23px;
					&>img{
						font-size: 0;
						margin-bottom: 4px;
						// width: 30px;
						height: 30px;
					}
					&>p{
						font-size: 14px;
						color: #FFFFFF;
						letter-spacing: 0.78px;
						text-shadow: 0 2px 4px rgba(0,0,0,0.88);
						font-weight: normal;
					}
				}
			}
		}
		& .back{
			position: absolute;
			right: 0;
			top: -40px;
			width: 70px;
			height: 30px;
			line-height: 30px;
			padding-left: 33px;
			border: 1px solid #FFFFFF;
			box-shadow: 0 2px 4px 0 rgba(0,0,0,0.76);
			border-radius: 4px;
			border-radius: 4px;
			background: url('../../../assets/img/scene/back.png') 8px center no-repeat;
			background-size: 20px 17px;
			font-size: 14px;
			color: #FFFFFF;
			letter-spacing: 0.78px;
			text-shadow: 0 2px 4px rgba(0,0,0,0.76);
			cursor: pointer;
		}
}

</style>
